<%@ taglib prefix="p" uri="/WEB-INF/tld/privilege.tld" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%     
	String path = request.getContextPath();     
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";     
%> 
<%response.setHeader("cache-control","public"); %>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>费用统计</title>
  <base href="<%=basePath%>"/>
  <%@ include file="../../list_include.jsp"%>
  
  <style type="text/css"> 
	fieldset,table,tr{margin:0; padding:0;}
	td{
		margin:0; 
		padding:0;
		word-wrap: break-word; 
		word-break:break-all;
		padding:0 5px 0 10px;
		border:1px;
	}
	form label {font-weight:bold;}
	#actionTable {margin:5px 0;}
	table{border-collapse: collapse;}
  </style>

  <script type="text/javascript">
	$(document).ready(function() { 
		
		$("#mode").bind('change', function(){
			var val = $(this).val(); 
			if(val == 1){
				//查询所有省份,隐藏省份选择按钮
				//同时修改表格的文本信息为"省份"
				$("#provincelabel").hide();
				$("#province").hide();
				$("#month").show();
				$("#monthlabel").show();
			}
			else if(val == 2){
				//查询省份指定年份的统计信息, 隐藏月份
				//同时修改表格的文本信息为"月份"
				$("#provincelabel").show();
				$("#province").show();
				$("#month").hide();
				$("#monthlabel").hide();
			}
		});
		
		$("#btn_search").click(function(){
			var val = $("#mode").val(); 
			if(val.length == 0 ){
				alert("请选择查询方式！" + $("#mode").val()); 
	        	return false; 
			}
			else
				$("#actionForm").submit();
		});
		
       	$("#actionTable").tablesorter({theme:'green', widgets:['zebra'],
       		headers:{0:{sorter:false},
       			1:{sorter:false},
       			2:{sorter:false},
       			3:{sorter:false},
       			4:{sorter:false},
       			5:{sorter:true},
       			6:{sorter:true},
       			7:{sorter:false},
       			8:{sorter:false}}});
       	
       	$("#btn_pageUp").click(function(){
			var curPage = $("#curPage").val();
			$("#curPage").val(parseInt(curPage) - 1);
			$("#actionForm").submit();
       	});
       	
       	$("#btn_pageDown").click(function(){
       		var curPage = $("#curPage").val();
			$("#curPage").val(parseInt(curPage) + 1);
			$("#actionForm").submit();
       	});

        $.ajaxSetup ({ cache:false });
	});  
	
	
  </script>
 </head>

 <body>
 <div style="width: 1208px;">
  <div>
    <fieldset>
	<legend>查询条件</legend>
		<div>
		<form id="actionForm" method="post" action="pjcost/cost/statics.do">
		<table>
		<tr>
		<td><label for="mode">查询方式</label></td>
		<td>
			<select id="mode" name="mode" style="width:120px;">
				<option value="1" <c:if test="${1 == selectmode }">selected ="true"</c:if>>查询所有省份</option>
				<option value="2" <c:if test="${2 == selectmode }">selected ="true"</c:if>>分省统计</option>
			</select>
		</td>
		<td><label id="provincelabel" for="province" style="<c:if test="${1 == selectmode }">display:none;</c:if>">省份</label></td>
		<td>
		<select id="province" name="province" style="width:120px;<c:if test="${1 == selectmode }">display:none;</c:if>">
			<option value="" style="color:red;">请选择省份</option>
			<c:forEach items="${allProvinceList }" var="pro" varStatus="status">
				<option value="${pro.value }" <c:if test="${pro.value == selectprovince }">selected ="true"</c:if>>
	                   		${pro.name }</option>
			</c:forEach>
		</select>
		</td>
		<td><select id="year" name="year" style="width:120px;">
		<option value="" style="color:red;">请选择年份</option>
		<c:forEach items="${allYears}" var="year" varStatus="status">
		<option value="${year }" <c:if test="${year == selectyear }">selected="true"</c:if>>${year}年</option>
		</c:forEach>
		</select>
		</td>
		<td><label for="year">年</label></td>
		<td>
		<select id="month" name="month" style="width:120px;<c:if test="${2 == selectmode }">display:none;</c:if>">
		<option value="" style="color:red;">请选择月份</option>
		<c:forEach var="i" begin="1" end="12">
			<option value="${i-1}" <c:if test="${i == selectmonth }">selected="true"</c:if>>${i}月</option>
		</c:forEach>
		</select>
		</td>
		<td><label for="month" id="monthlabel" style="<c:if test="${2 == selectmode }">display:none;</c:if>">月</label></td>
		<td><input type="button" id="btn_search" name="btn_search" value="查询" style="width:80px;" /></td>
		</tr>
		<tr>
		<td><input type="hidden" name="curPage" id="curPage" value="${curPage}" /></td>
		</tr>
		</table>
		</form>
		</div>
	</fieldset>
  </div>
  
  <div>
  	<table id="actionTable" class="tablesorter" >
	  <thead> 
	    <tr> 
	      <th width="20%" style="text-align:center;">
	      	<c:choose>
	      		<c:when test="${2==selectmode }">月份</c:when>
	      		<c:otherwise>省份</c:otherwise>			
	      	</c:choose>
	      </th>
	      <th width="35%" style="text-align:center;">预期费用总额</th>
	      <th width="35%" style="text-align:center;">实际费用总额</th> 
 	    </tr> 
	  </thead>
	  <tbody>
	 	<c:forEach items="${listMap}" var="cost" varStatus="status">
	  	<tr>
	  	  <td style="text-align:center;">
	  	  	<c:choose>
	  	  		<c:when test="${1==selectmode }">${provinceMap[cost.province] }</c:when>
	  	  		<c:otherwise>${cost.re_month }</c:otherwise>
	  	  	</c:choose>
	  	  
	  	  </td>
	  	  <td style="text-align:center;"><fmt:formatNumber type="number" value="${cost.sum_expect }" /></td>
	  	  <td style="text-align:center;"><fmt:formatNumber type="number" value="${cost.sum_actual }" /></td>
	  	</tr>
	  	</c:forEach>
	  	<tr>
	  		<td style="text-align:center;"><strong>总计</strong></td>
	  		<td style="text-align:center;"><fmt:formatNumber type="number" value="${totalexpect}" /></td>
	  		<td style="text-align:center;"><fmt:formatNumber type="number" value="${totalactual}" /></td>
	  	</tr>
	  </tbody>
  	</table>
  </div>

	<div style="float:left;">
        <input id="btn_back" type="button" value="返回" onclick="history.go(-1);" style="width: 80px;"/>
  </div>
  <div>
      <div style="text-align:right;">
        <c:if test="${curPage <= 1}"><input type="button" disabled="disabled" id="btn_pageUp" value="上一页"/></c:if>
        <c:if test="${curPage > 1}"><input type="button" id="btn_pageUp" value="上一页"/></c:if>
        <c:if test="${curPage >= totalPage}"><input type="button" id="btn_pageDown" disabled="disabled" value="下一页"/></c:if>
        <c:if test="${curPage < totalPage}"><input type="button" id="btn_pageDown" value="下一页"/></c:if>
        共${totalPage}页/共${totalRecords}条
        <select id="selectPage" style="width: auto;">
            <c:forEach var="i" begin="1" end="${totalPage}">
                <option id="${i}" <c:if test="${i == curPage}">selected="selected"</c:if>>${i}</option>
            </c:forEach>
        </select>
        <input id="btn_change" type="button" value="转至" />
      </div>
  </div>
 </div>
 </body>
</html>

